<template>
	<view>
		<view class="map">
			<map @markertap="onmarkertap" :scale="18" :markers="markers" id="map" :longitude="location.longitude"
				:latitude="location.latitude"></map>
		</view>
		<view class="box">
			<view class="house-news mes">
				房屋信息
			</view>
			<view class="house-location">
				北京西三旗花园1号楼 101
			</view>
			<view class="person-news mes">
				报修信息
			</view>
			<u-form :model="form">
				<u-form-item label="维修项目" labelWidth="208rpx">
					<input type="text" :value="form.name" />
				</u-form-item>
				<u-form-item label="手机号码" labelWidth="208rpx">
					<input type="text" :value="form.mobile" />
				</u-form-item>
				<u-form-item label="预约日期" labelWidth="208rpx">
					<input type="text" :value="form.date" />
				</u-form-item>
				<u-form-item label="问题描述" labelWidth="208rpx" labelPosition="top">
					<textarea name="" id="" auto-height auto-focus :value="form.question"></textarea>
				</u-form-item>
				<u-form-item label="问题附件" labelWidth="208rpx" labelPosition="top">
					<view class="question-file">
						<image src="../../static/icon/myrepair.png" mode="widthFix"></image>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 修改信息 -->
		<view class="xiugai">
			<view>修改信息</view>
			<text>|</text>
			<view>取消报修</view>
		</view>
	</view>
</template>

<script>
	import qqmapwx from '@/utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0
				}],
				currentLocation: '定位中',
				form: {
					name: null,
					mobile: null,
					date: null,
					question: '每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定，时有时无。每天晚上7点到8点热水都很不稳定，时有时无。'
				}
			};
		},
		onLoad() {
			this.initLocation()
		},
		methods: {
			onmarkertap(e) {
				console.log(e)
			},
			// 初始化定位
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						// console.log(res)
						this.uploadLocation(res)
						// 将坐标解析文本
						this.initLocationText()
						// this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				// console.log('坐标解析')
				// console.log(qqmapwx)
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						console.log(res.result)
						this.currentLocation = res.result.address
					}
				})
			},
			// uploadLocation 分装
			uploadLocation(res) {
				this.currentLocation = res.name
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			// 重新选择定位
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						console.log(res)
						if (!res.name) return
						this.currentLocation = res.name
						this.uploadLocation(res)
						this.searchCommunity()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map map {
		width: 750rpx;
		height: 440rpx;
	}

	.mes {
		color: #979797;
		font-weight: regular;
		font-size: 24rpx;
		padding: 30rpx 0 20rpx 30rpx;
		line-height: 1.5;
		background-color: #FAFAFA;
	}

	.box {
		padding-bottom: 279rpx;

		.house-location {
			background-color: #fff;
			padding: 30rpx 0 30rpx 30rpx;
			font-size: 28rpx
		}

		::v-deep .u-form {
			background-color: #fff;
		}

		::v-deep .u-count-down__text {
			color: #5591AF;
		}

		::v-deep .u-form-item__body {
			margin-left: 30rpx;
			padding: 30rpx 30rpx 30rpx 0;
			// padding-right: 30rpx;
			border-bottom: 1px solid #F2F2F6;
		}

		textarea {
			margin-top: 20rpx;
			width: 100%;
		}

		.question-file {
			padding-top: 20rpx;

			image {
				width: 50rpx;
			}
		}
	}

	.xiugai {
		background-color: #ffffff;
		width: 100%;
		height: 145rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		z-index: 555;

		view {
			width: 50%;
		}

		text {
			color: #f2f2f2;
		}

		view:nth-child(1) {
			color: #5591AF;
		}
	}
</style>
